//导入
import React, { Component } from 'react';
import { Route, NavLink, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';

import './Index.less'
import { NavConfiger, Navigator } from '../../navigator/Navigator';

import { Page1 } from './Page1';
import { Page2 } from './Page2';



function Left(props) {
    return <p className="custom_nav" >左:{props.navConfig.left}</p>
}

function Center(props) {
    return <p className="custom_nav" >中:{props.navConfig.center}</p>
}

function Right(props) {
    return <p className="custom_nav" >右:{props.navConfig.right}</p>
}


class Index extends Component {

    rightClickHandle() {
        alert("你点击了导航条的rightItem!");
    }

    navConfig = {
        left: "LeftItem",
        center: "Title",
        right: "RightItem",
        navClass: "nav_area_default"
    };


    render() {

        return (
            <NavConfiger>
                <fieldset className="page1" >
                    <legend>自定义导航</legend>
                    <Navigator navConfig={this.navConfig} >
                        <Left />
                        <Center />
                        <Right />
                    </Navigator>
                    <div className="content_box" >
                        <Route path={`${this.props.match.path}/page1`} component={Page1} />
                        <Route path={`${this.props.match.path}/page2`} component={Page2} />
                        
                        <br />
                        <NavLink to={`${this.props.match.url}/page1`} >跳转到:页面1</NavLink>
                    </div>
                </fieldset>
            </NavConfiger>

        );
    }
}



export { Index };
